<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API接口测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>API接口测试工具</h1>
        
        <div class="form-group">
            <label for="baseUrl">服务器地址:</label>
            <input type="text" id="baseUrl" value="192.168.31.91:8080/ercms" placeholder="输入服务器地址">
        </div>
        
        <div class="form-group">
            <label for="endpoint">接口路径:</label>
            <select id="endpoint">
                <option value="/api/auth/login">登录接口 (/api/auth/login)</option>
                <option value="/api/auth/verify">Token验证 (/api/auth/verify)</option>
                <option value="/api/health">健康检查 (/api/health)</option>
                <option value="/api/info">系统信息 (/api/info)</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="method">请求方法:</label>
            <select id="method">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="requestData">请求数据 (JSON格式):</label>
            <textarea id="requestData" rows="5" placeholder='{"username": "root", "password": "123456"}'></textarea>
        </div>
        
        <div class="form-group">
            <label for="token">Token (可选):</label>
            <input type="text" id="token" placeholder="Bearer token">
        </div>
        
        <button onclick="testApi()">测试接口</button>
        <button onclick="clearResult()">清除结果</button>
        
        <div id="result" class="result info" style="display: none;">
            点击"测试接口"按钮开始测试...
        </div>
    </div>

    <script>
        function testApi() {
            const baseUrl = document.getElementById('baseUrl').value.trim();
            const endpoint = document.getElementById('endpoint').value;
            const method = document.getElementById('method').value;
            const requestData = document.getElementById('requestData').value.trim();
            const token = document.getElementById('token').value.trim();
            
            if (!baseUrl) {
                showResult('请输入服务器地址', 'error');
                return;
            }
            
            const url = `http://${baseUrl}${endpoint}`;
            const resultDiv = document.getElementById('result');
            
            showResult(`正在测试: ${url}\n方法: ${method}`, 'info');
            
            const options = {
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                }
            };
            
            if (token) {
                options.headers['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
            }
            
            if (method === 'POST' && requestData) {
                try {
                    options.body = requestData;
                } catch (e) {
                    showResult(`JSON格式错误: ${e.message}`, 'error');
                    return;
                }
            }
            
            fetch(url, options)
                .then(response => {
                    const responseText = response.text();
                    return responseText.then(text => ({
                        status: response.status,
                        statusText: response.statusText,
                        headers: Object.fromEntries(response.headers.entries()),
                        body: text
                    }));
                })
                .then(data => {
                    let result = `✅ 请求成功!\n\n`;
                    result += `状态码: ${data.status} ${data.statusText}\n`;
                    result += `响应头:\n`;
                    Object.entries(data.headers).forEach(([key, value]) => {
                        result += `  ${key}: ${value}\n`;
                    });
                    result += `\n响应体:\n`;
                    try {
                        const jsonBody = JSON.parse(data.body);
                        result += JSON.stringify(jsonBody, null, 2);
                    } catch (e) {
                        result += data.body;
                    }
                    
                    showResult(result, 'success');
                })
                .catch(error => {
                    let result = `❌ 请求失败!\n\n`;
                    result += `错误信息: ${error.message}\n\n`;
                    result += `可能的原因:\n`;
                    result += `1. 后端服务未启动\n`;
                    result += `2. 网络连接问题\n`;
                    result += `3. 防火墙阻止了连接\n`;
                    result += `4. IP地址或端口不正确\n`;
                    
                    showResult(result, 'error');
                });
        }
        
        function showResult(message, type) {
            const resultDiv = document.getElementById('result');
            resultDiv.textContent = message;
            resultDiv.className = `result ${type}`;
            resultDiv.style.display = 'block';
        }
        
        function clearResult() {
            const resultDiv = document.getElementById('result');
            resultDiv.style.display = 'none';
        }
        
        // 页面加载时自动填充登录数据
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('requestData').value = JSON.stringify({
                username: "root",
                password: "123456"
            }, null, 2);
        });
    </script>
</body>
</html> 